{% extends 'base.html' %}

{% block title %}NLP分析结果{% endblock %}

{% block content %}
    <style>
        /* 复用 nlp_analysis.html 的样式变量 */
        :root {
            --primary-blue: #524eef;
            --text-gray: #6D6D6D;
            --accent-yellow: #FFF8E5;
            --accent-purple: #E8E6F9;
        }

        body {
            min-height: 100vh;
            padding-bottom: 12%;
        }

        /* 类似 nlp_analysis.html 文本框的样式 */
        .result-container {
            width: 100%;
            padding: 18px 30px;
            border: 2px solid var(--primary-blue);
            border-radius: 50px;
            font-size: 16px;
            color: var(--text-gray);
            background: rgba(255, 255, 255, 0.9);
        }
        .container my-4{
            margin-top:3%;
        }
        .accordion-body pre {
            border-radius: 25px; /* 与结果容器圆角匹配 */
        }
.accordion-button{
    background: var(--primary-blue);
    color: white;
    border: none;
    border-radius: 20px;
    padding: 8px 25px;
    font-size: 16px;
    white-space: nowrap;
    cursor: pointer;
    transition: opacity 0.3s;
    text-decoration: none;
    display: inline-block;
    margin: 1% auto;
}
        /* 复用 visualize.html 按钮样式 */
        .nlp-btn {
            background: var(--primary-blue);
            color: white;
            border: none;
            border-radius: 20px;
            padding: 8px 25px;
            font-size: 16px;
            white-space: nowrap;
            cursor: pointer;
            transition: opacity 0.3s;
            text-decoration: none;
            display: inline-block;
            margin: 1% auto;
        }

        .nlp-btn:hover {
            opacity: 0.9;
            color: white;
        }
        .button-spacing {
            margin-right: 500px; /* 可根据需要调整间距大小 */
        }
    </style>

    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8 result-container">
                <div class="card mt-5">
                    <div class="card-header bg-primary text-white text-center">
                        <h2>NLP分析结果</h2>
                    </div>
                    <div class="card-body">
                        {% if result %}
                            <!-- 存储分析类型 -->
                            <input type="hidden" id="analysisType" value="{{ analysis_type }}">
                            <div class="accordion" id="nlpAccordion">
                                <!-- 分词结果 -->
                                <div class="accordion-item" id="tokenizeSection">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTokenize" aria-expanded="true" aria-controls="collapseTokenize">
                                            分词结果
                                        </button>
                                    </h2>
                                    <div id="collapseTokenize" class="accordion-collapse collapse show" data-bs-parent="#nlpAccordion">
                                        <div class="accordion-body">
                                            <pre class="bg-light p-3 border rounded" id="tokenizeResult">{{ result.0|pprint }}</pre>
                                        </div>
                                    </div>
                                </div>
                                <!-- 词性标注结果 -->
                                <div class="accordion-item" id="posSection">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapsePos" aria-expanded="false" aria-controls="collapsePos">
                                            词性标注结果
                                        </button>
                                    </h2>
                                    <div id="collapsePos" class="accordion-collapse collapse" data-bs-parent="#nlpAccordion">
                                        <div class="accordion-body">
                                            <table class="table table-striped">
                                                <thead>
                                                    <tr>
                                                        <th>词语</th>
                                                        <th>词性</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    {% for item in result.1 %}
                                                        
                                                            <tr>
                                                                <td>{{ item.word }}</td>
                                                                <td>{{ item.pos}}</td>
                                                            </tr>
                                                        
                                                        
                                                    {% endfor %}
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                                <!-- 语义角色分析结果 -->
                                <div class="accordion-item" id="srlSection">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSrl" aria-expanded="false" aria-controls="collapseSrl">
                                            语义角色分析结果
                                        </button>
                                    </h2>
                                    <div id="collapseSrl" class="accordion-collapse collapse" data-bs-parent="#nlpAccordion">
                                        <div class="accordion-body">
                                            <pre class="bg-light p-3 border rounded" id="srlResult">{{ result.2|pprint }}</pre>
                                        </div>
                                    </div>
                                </div>
                                <!-- 专名识别结果 -->
                                <div class="accordion-item" id="nerSection">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseNer" aria-expanded="false" aria-controls="collapseNer">
                                            专名识别结果
                                        </button>
                                    </h2>
                                    <div id="collapseNer" class="accordion-collapse collapse" data-bs-parent="#nlpAccordion">
                                        <div class="accordion-body">
                                            <pre class="bg-light p-3 border rounded" id="nerResult">{{ result.3|pprint }}</pre>
                                        </div>
                                    </div>
                                </div>
                                <!-- 指代消解结果 -->
                                <div class="accordion-item" id="corefSection">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseCoref" aria-expanded="false" aria-controls="collapseCoref">
                                            指代消解结果
                                        </button>
                                    </h2>
                                    <div id="collapseCoref" class="accordion-collapse collapse" data-bs-parent="#nlpAccordion">
                                        <div class="accordion-body">
                                            <pre class="bg-light p-3 border rounded" id="corefResult">{{ result.4|pprint }}</pre>
                                        </div>
                                    </div>
                                </div>
                                <!-- 成分句法分析结果 -->
                                <div class="accordion-item" id="conSection">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseCon" aria-expanded="false" aria-controls="collapseCon">
                                            成分句法分析结果
                                        </button>
                                    </h2>
                                    <div id="collapseCon" class="accordion-collapse collapse" data-bs-parent="#nlpAccordion">
                                        <div class="accordion-body">
                                            <pre class="bg-light p-3 border rounded" id="conResult">{{ result.5|pprint }}</pre>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% else %}
                            <p class="text-center text-muted">没有返回结果</p>
                        {% endif %}
                    </div>
                    <div class="card-footer text-center">
                        <!-- 应用 nlp-btn 样式 -->
                        <a href="/"class="nlp-btn button-spacing">返回主页</a>
                    </div>
                    <!-- 添加按钮用于控制列表展开和收起 -->
                    <button id="toggleTable" class="nlp-btn">展开/收起词性列表</button>
                    <div id="tableContainer" style="display: none;">
                        <table border="1" class="dataframe">
                            <thead>
                                <tr style="text-align: right;">
                                    <th></th>
                                    <th>词性名称</th>
                                    <th>词性解释</th>
                                    <th>例子</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th>0</th>
                                    <td>动态助词</td>
                                    <td>助词</td>
                                    <td>了、着、过</td>
                                </tr>
                                <tr>
                                    <th>1</th>
                                    <td>结构助词把/将</td>
                                    <td>当“把”、“将”出现在结构“NP0 + BA + NP1+VP”时的词性</td>
                                    <td>把、将</td>
                                </tr>
                                <tr>
                                    <th>2</th>
                                    <td>并列连词</td>
                                    <td>并列连词</td>
                                    <td>与、和、或者、还是</td>
                                </tr>
                                <tr>
                                    <th>3</th>
                                    <td>数词或概数词</td>
                                    <td>数词或表达数量的词</td>
                                    <td>一百、好些、若干</td>
                                </tr>
                                <tr>
                                    <th>4</th>
                                    <td>关系连词</td>
                                    <td>从属连词</td>
                                    <td>如果、那么、就</td>
                                </tr>
                                <tr>
                                    <th>5</th>
                                    <td>补语成分“的”</td>
                                    <td>当“的”或“之”作补语标记或名词化标记时的词性，其结构为：S/VP DEC {NP}，如，喜欢旅游的大学生</td>
                                    <td>的、之</td>
                                </tr>
                                <tr>
                                    <th>6</th>
                                    <td>属格“的”</td>
                                    <td>当“的”或“之”作所有格时的词性，其结构为:NP/PP/JJ/DT DEG {NP}， 如，他的车、经济的发展</td>
                                    <td>的、之</td>
                                </tr>
                                <tr>
                                    <th>7</th>
                                    <td>助词“得”</td>
                                    <td>当“得”出现在结构“V-得-R”时的词性，如，他跑得很快</td>
                                    <td>得</td>
                                </tr>
                                <tr>
                                    <th>8</th>
                                    <td>助词“地”</td>
                                    <td>当“地”出现在结构“X-地-VP”时的词性，如，高兴地说</td>
                                    <td>地</td>
                                </tr>
                                <tr>
                                    <th>9</th>
                                    <td>限定词</td>
                                    <td>代冠词，通常用来修饰名词</td>
                                    <td>这、那、该、每、各</td>
                                </tr>
                                <tr>
                                    <th>10</th>
                                    <td>表示省略</td>
                                    <td>“等”、“等等”的词性</td>
                                    <td>等、等等</td>
                                </tr>
                                <tr>
                                    <th>11</th>
                                    <td>表情符</td>
                                    <td>表情符、或称颜文字</td>
                                    <td>：）</td>
                                </tr>
                                <tr>
                                    <th>12</th>
                                    <td>外来语</td>
                                    <td>外来词</td>
                                    <td>卡拉、A型</td>
                                </tr>
                                <tr>
                                    <th>13</th>
                                    <td>不完整成分</td>
                                    <td>不完整成分，尤指ASR导致的错误</td>
                                    <td>好xin、那个ba</td>
                                </tr>
                                <tr>
                                    <th>14</th>
                                    <td>句首感叹词</td>
                                    <td>感叹词，通常出现在句子首部</td>
                                    <td>啊</td>
                                </tr>
                                <tr>
                                    <th>15</th>
                                    <td>其他名词修饰语</td>
                                    <td>形容词</td>
                                    <td>共同、新</td>
                                </tr>
                                <tr>
                                    <th>16</th>
                                    <td>被动标记</td>
                                    <td>当“被”、“叫”、“给”出现在结构“NP0 + LB + NP1+ VP”结构时 的词性，如，他被我训了一顿</td>
                                    <td>被、叫、给</td>
                                </tr>
                                <tr>
                                    <th>17</th>
                                    <td>方位词</td>
                                    <td>方位词以及表示范围的限定词</td>
                                    <td>前、旁、到、在内、以来、为止</td>
                                </tr>
                                <tr>
                                    <th>18</th>
                                    <td>量词</td>
                                    <td>量词</td>
                                    <td>个、群、公里</td>
                                </tr>
                                <tr>
                                    <th>19</th>
                                    <td>其他助词</td>
                                    <td>其他虚词，包括“所”、“以”、“来”和“而”等出现在VP前的词</td>
                                    <td>所、以、来、而</td>
                                </tr>
                                <tr>
                                    <th>20</th>
                                    <td>普通名词</td>
                                    <td>除专有名词和时间名词外的所有名词</td>
                                    <td>桌子、生活、经济</td>
                                </tr>
                                <tr>
                                    <th>21</th>
                                    <td>噪声</td>
                                    <td>汉字顺序颠倒产生的噪声</td>
                                    <td>事/NOI 类/NOI 各/NOI 故/NOI</td>
                                </tr>
                                <tr>
                                    <th>22</th>
                                    <td>专有名词</td>
                                    <td>专有名词，通常表示地名、人名、机构名等</td>
                                    <td>北京、乔丹、微软</td>
                                </tr>
                                <tr>
                                    <th>23</th>
                                    <td>时间名词</td>
                                    <td>表示时间概念的名词</td>
                                    <td>一月、汉朝、当今</td>
                                </tr>
                                <tr>
                                    <th>24</th>
                                    <td>序数词</td>
                                    <td>序列词</td>
                                    <td>第一百</td>
                                </tr>
                                <tr>
                                    <th>25</th>
                                    <td>拟声词</td>
                                    <td>象声词</td>
                                    <td>哗哗、呼、咯吱</td>
                                </tr>
                                <tr>
                                    <th>26</th>
                                    <td>介词</td>
                                    <td>介词</td>
                                    <td>从、对、根据</td>
                                </tr>
                                <tr>
                                    <th>27</th>
                                    <td>代词</td>
                                    <td>代词，通常用来指代名词</td>
                                    <td>我、这些、其、自己</td>
                                </tr>
                                <tr>
                                    <th>28</th>
                                    <td>标点符号</td>
                                    <td>标点符号</td>
                                    <td>?、。、；</td>
                                </tr>
                                <tr>
                                    <th>29</th>
                                    <td>被动标记</td>
                                    <td>当“被”、“给”出现在NP0 +SB+ VP结果时的词性，如，他被训了 一顿</td>
                                    <td>被、叫</td>
                                </tr>
                                <tr>
                                    <th>30</th>
                                    <td>句末语气词</td>
                                    <td>经常出现在句尾的词</td>
                                    <td>吧、呢、啊、啊</td>
                                </tr>
                                <tr>
                                    <th>31</th>
                                    <td>网址</td>
                                    <td>网址</td>
                                    <td>www.hankcs.com</td>
                                </tr>
                                <tr>
                                    <th>32</th>
                                    <td>性质形容词</td>
                                    <td>可以接在“很”后面的形容词谓语</td>
                                    <td>NaN</td>
                                </tr>
                                <tr>
                                    <th>33</th>
                                    <td>系动词</td>
                                    <td>系动词，表示“是”或“非”概念的动词</td>
                                    <td>是、为、非</td>
                                </tr>
                                <tr>
                                    <th>34</th>
                                    <td>动词有/无</td>
                                    <td>表示“有”或“无”概念的动词</td>
                                    <td>有、没有、无</td>
                                </tr>
                                <tr>
                                    <th>35</th>
                                    <td>其他动词</td>
                                    <td>其他普通动词，包括情态词、控制动词、动作动词、心理动词等等</td>
                                    <td>可能、要、走、喜欢</td>
                                </tr>
                            </tbody>
                          </table>
                        
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 获取分析类型
            const analysisType = document.getElementById('analysisType').value;
            if (analysisType !== 'all') {
                // 定义各模块 ID 映射
                const sectionIds = {
                    'tokenize': 'tokenizeSection',
                    'pos': 'posSection',
                    'srl': 'srlSection',
                    'ner': 'nerSection',
                    'coref': 'corefSection',
                    'con': 'conSection'
                };

                // 遍历各模块，根据分析类型隐藏或显示
                for (const [type, id] of Object.entries(sectionIds)) {
                    const section = document.getElementById(id);
                    if (type === analysisType) {
                        section.style.display = 'block';
                    } else {
                        section.style.display = 'none';
                    }
                }
            }

            // 获取按钮和表格容器元素
            const toggleButton = document.getElementById('toggleTable');
            const tableContainer = document.getElementById('tableContainer');

            // 为按钮添加点击事件
            toggleButton.addEventListener('click', function() {
                if (tableContainer.style.display === 'none') {
                    tableContainer.style.display = 'block';
                    toggleButton.textContent = '展开/收起词性列表';
                } else {
                    tableContainer.style.display = 'none';
                    toggleButton.textContent = '展开/收起词性列表';
                }
            });

            
        });
    </script>
{% endblock %}
